import React from 'react'
import styled from 'styled-components'
import { connect } from 'react-redux'
import QRCode from 'qrcode.react'

import Modal from './Modal/'
import ModalTitle from './Modal/ModalTitle'
import Flex from '../components/Flex'
import Text from '../components/Text'
import AceEditor from './AceEditor.js'
import { Button } from './ConsoleArea.js'
import { rotate360, slideIn } from '../components/Animation/'

import Icon from '../components/Icon/'
import IconClose from '../components/Icon/close.svg'
import IconPublish from '../components/Icon/publish.svg'
import IconLoading from '../components/Icon/loading.svg'
import IconScan from '../components/Icon/scan.svg'
import Color from '../components/Color'
import { Pre } from './common/'

import * as actions from '../actionTypes/'

const CustomModal = props => {
    const {
        showPublishModal,
        projectName,
        projectId,
        projectDesc,
        isLoading,
        showQRCode,

        showTurtleOrResult,
    } = props.project
    const { value, consoles } = props.editor
    const { dispatch } = props

    const qrcode = window.location.origin + '/player.html?id=' + projectId

    const changeProjectName = e => {
        dispatch({
            type: actions.CHANGE_PROJECT_NAME,
            payload: e.target.value,
        })
    }

    const changeProjectDesc = e => {
        dispatch({
            type: actions.CHANGE_PROJECT_DESC,
            payload: e.target.value,
        })
    }

    const handleClose = () => {
        dispatch({
            type: actions.SHOW_TURTLE_OR_RESULT,
            payload: true,
        })
        dispatch({
            type: actions.TOGGLE_PUBLISH_MODAL,
            payload: false,
        })
        dispatch({
            type: actions.TOGGLE_QRCODE,
            payload: false,
        })
    }

    const handlePublish = () => {
        if (isLoading) {
            return
        }

        dispatch({
            type: actions.CONFIRM_PUBLISH_PROJECT,
            payload: {},
        })
    }

    const handleQRCode = () => {
        if (!projectId) {
            dispatch({
                type: actions.SHOW_TOAST,
                payload: '刚刚保存作品出错了，请关闭弹框重新发布',
            })
            return
        }
        dispatch({
            type: actions.TOGGLE_QRCODE,
            payload: true,
        })
    }

    const handleTurtleOrResult = (e, payload) => {
        dispatch({
            type: actions.SHOW_TURTLE_OR_RESULT,
            payload,
        })
    }
    return (
        <Modal isOpen={showPublishModal}>
            <Container column>
                <ModalTitle align="center">
                    <Title align="center" justify="space-between">
                        <Flex align="center">
                            <Icon color="white" size={18} src={IconPublish} />
                            <Text type="medium" color="white">
                                &nbsp;发布作品
                            </Text>
                        </Flex>
                        <Icon
                            size={20}
                            src={IconClose}
                            color="white"
                            onClick={() => handleClose()}
                            pointer
                        />
                    </Title>
                </ModalTitle>
                <Main auto>
                    <Left column>
                        <LeftTitle>
                            <Text type="small" color="gray">
                                源代码
                            </Text>
                        </LeftTitle>
                        <AceEditor
                            disabled
                            theme="monokai"
                            value={value}
                            fontSize={16}
                        />
                    </Left>
                    <Right auto column>
                        <Flex>
                            <TurtleText
                                type="small"
                                color={showTurtleOrResult ? 'primary' : 'gray'}
                                onClick={e => handleTurtleOrResult(e, true)}
                            >
                                海龟图&nbsp;&nbsp;|&nbsp;&nbsp;
                            </TurtleText>
                            <TurtleText
                                type="small"
                                color={!showTurtleOrResult ? 'primary' : 'gray'}
                                onClick={e => handleTurtleOrResult(e, false)}
                            >
                                代码结果
                            </TurtleText>
                        </Flex>
                        <TurtleAndConsole column>
                            <TurtleArea center />
                            <ConsoleArea
                                showTurtleOrResult={showTurtleOrResult}
                            >
                                <Pre>{consoles}</Pre>
                            </ConsoleArea>
                        </TurtleAndConsole>
                        <Text type="small" color="gray">
                            作品名称
                        </Text>
                        <Input
                            placeholder="作品名称"
                            value={projectName}
                            onChange={v => changeProjectName(v)}
                        />
                        <Space />
                        <Text type="small" color="gray">
                            作品说明
                        </Text>
                        <TextArea
                            placeholder="作品说明"
                            height={168}
                            pt={10}
                            value={projectDesc}
                            onChange={v => changeProjectDesc(v)}
                        />
                        <Space />
                        <Flex justify="space-between">
                            <Button
                                type="blue"
                                color="white"
                                onClick={() => handlePublish()}
                            >
                                {isLoading && (
                                    <RotateIcon size={20} src={IconLoading} />
                                )}
                                确认发布
                            </Button>
                            <Button
                                type="primary"
                                color="white"
                                onClick={() => handleQRCode()}
                            >
                                扫码分享
                            </Button>
                        </Flex>
                    </Right>
                </Main>
            </Container>
            {showQRCode && (
                <QRWrap column align="center">
                    <QRTitle center>
                        <Text type="body" color="white">
                            分享作品
                        </Text>
                    </QRTitle>
                    <QR>
                        <QRCode value={qrcode} size={118} level="Q" />
                    </QR>
                    <ScanWrap auto center>
                        <Text type="small" color="blue">
                            手机扫一扫分享
                        </Text>
                        <IconT src={IconScan} size={40} />
                    </ScanWrap>
                </QRWrap>
            )}
        </Modal>
    )
}

export default connect(state => state)(CustomModal)

const Title = styled(Flex)`
    height: 100%;
    padding-left: 20px;
    padding-right: 20px;
`

const Container = styled(Flex)`
    width: 930px;
    min-height: 696px;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
`

const Main = styled(Flex)`
    padding: 30px;
    padding-top: 10px;
`

const Left = styled(Flex)`
    width: 510px;
`

const LeftTitle = styled(Flex)`
    height: 30px;
`

const Right = styled(Flex)`
    padding-left: 16px;
`

const Space = styled('div')`
    height: 10px;
`

const TurtleText = styled(Text)`
    cursor: pointer;
`

const Input = styled('input')`
    background: #f6f6f6;
    height: ${({ height }) => (height ? height + 'px' : '40px')};
    border-radius: 10px;
    margin-top: 8px;
    resize: none;
    border: none;
    color: #333;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: ${({ pt }) => (pt ? pt + 'px' : 0)};
    &:focus {
        outline: none;
    }
`

const TextArea = Input.withComponent('textarea')

const TurtleConfig = {
    width: 344,
    height: 235,
}

const TurtleArea = styled(Flex).attrs({
    id: 'turtle-area-publish',
})`
    height: ${TurtleConfig.height}px;
    width: ${TurtleConfig.width}px;
    transform: translate(
        -${TurtleConfig.width / 2}px,
        ${TurtleConfig.height / 2 + 10}px
    );
`

const TurtleAndConsole = styled(Flex)`
    height: ${TurtleConfig.height}px;
    width: 100%;
    border-radius: 10px;
    overflow: hidden;
    background: #eee;
    margin-bottom: 15px;
    margin-top: 8px;
    position: relative;
`

const ConsoleArea = styled(Flex)`
    position: absolute;
    top: ${({ showTurtleOrResult }) =>
        showTurtleOrResult ? TurtleConfig.height + 'px' : '0'};
    left: 0;
    right: 0;
    bottom: 0;
    background: ${Color.consoleBg};
    transition: top 0.3s;
    padding: 20px;
    padding-top: 0;
    overflow-y: auto;
    color: #fff;
`

const QRWrap = styled(Flex)`
    position: absolute;
    width: 160px;
    height: 260px;
    background: #fff;
    bottom: 0;
    right: -170px;
    border-radius: 5px;
    overflow: hidden;
    animation: ${slideIn} 0.7s;
`

const QRTitle = styled(Flex)`
    height: 36px;
    background: ${Color.blue};
    width: 100%;
`

const QR = styled(Flex)`
    width: 118px;
    height: 118px;
    margin-top: 12px;
`

const ScanWrap = styled(Flex)``

const IconT = styled(Icon)`
    margin-top: -20px;
`

export const RotateIcon = styled(Icon)`
    animation: ${rotate360} 2s linear infinite;
    margin-right: 5px;
`



// WEBPACK FOOTER //
// ./src/containers/PublishModal.js